<style >
	.item{
		height: 50px;
		border-bottom:  1px solid #dbdbdb;
		line-height: 50px;
	}

</style>
<template>
	<!-- 列表模板 -->
	<div>
		<!-- <div class="item">12121</div> -->

		 <div id="mescroll" class="mescroll"> 
		      <ul id="dataList" class="data-list" v-cloak>
						<li v-for="pd in pdlist">
							
							<p class="item">{{pd.pdName}}</p>
						
						</li>
					</ul>
        </div>  
	</div>
</template>

<script type="text/javascript">
	


  export default {
  	    data () {
          return {
              mescroll: null,
              pdlist:[],
    
              
          }
      },

   mounted:function(){
   		var self = this;
			self.mescroll = new MeScroll("mescroll", { //请至少在vue的mounted生命周期初始化mescroll,以确保您配置的id能够被找到
				up: {
					callback: function(){
								console.info(self.pdlist.length)
						     	if(self.pdlist.length >= 30)
						     	{

						     		self.mescroll.endSuccess(self.pdlist.length,false);
						     		return;
						     	}
					
								var obj = new Object();
					    		obj.pdName = 'addd';
					    		self.pdlist.push(obj)
					    		// self.pdlist.push(obj)
					    		self.mescroll.endSuccess(self.pdlist.length,true);
					}, //上拉回调
					//以下参数可删除,不配置
					isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
					//page:{size:8}, //可配置每页8条数据,默认10
					toTop:{ //配置回到顶部按钮
						src : "../res/img/mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改
						//html: null, //html标签内容,默认null; 如果同时设置了src,则优先取src
						//offset : 1000
					},
					empty:{ //配置列表无任何数据的提示
						warpId:"dataList",
						icon : "../res/img/mescroll-empty.png" , 
//						  	tip : "亲,暂无相关数据哦~" , 
//						  	btntext : "去逛逛 >" , 
//						  	btnClick : function() {
//						  		alert("点击了去逛逛按钮");
//						  	} 
					},
					//vue的案例请勿配置clearId和clearEmptyId,否则列表的数据模板会被清空
					//vue的案例请勿配置clearId和clearEmptyId,否则列表的数据模板会被清空
//						clearId: "dataList",
//						clearEmptyId: "dataList"
				},
				down:{

					callback:function(){

    						// alert()
    						self.pdlist= []
				    		var obj = new Object();
				    		obj.pdName = 'xxx';
				    		self.pdlist.push(obj)
				    			self.pdlist.push(obj)
				    			self.pdlist.push(obj)
				    			self.pdlist.push(obj)
				    			self.pdlist.push(obj)
				    			self.pdlist.push(obj)
				    			self.pdlist.push(obj)
				    			self.pdlist.push(obj)
				    			self.pdlist.push(obj)
				    			self.pdlist.push(obj)
				    			self.pdlist.push(obj)
				    			self.pdlist.push(obj)

				    			self.pdlist.push(obj)
				    			self.pdlist.push(obj)
				    		self.mescroll.endSuccess(self.pdlist.length,true);

					},
					
				},
				
			});
     
    },
    methods: {
    	upCallback:function()
    	{
    		// alert('upCallback')
    		// this.mescroll.endErr();
    		this.pdlist= []
    		var obj = new Object();
    		obj.pdName = 'xxx';
    		this.pdlist.push(obj)
    		this.mescroll.endSuccess(1);


    	},
    	downCallback:function()
    	{
    	
					

    	},

    },
  }
 
</script>